<!--  -->
<template>
   <div class='ordersucess'>
        <div style="line-height:35px;padding:30px;">
            <check-step num="3"></check-step>             
        </div>      
       <div>订单号<span>{{orderId}}</span></div>
       <div>总价格<span>{{orderTotal}}</span></div>
       <div>时间<span>{{format(createDate)}}</span></div>
       <ul class="goodlist">
           <li>
               <span>名称</span>
               <span>单价</span>
               <span>数量</span>
               <span>价格</span>
            </li>
           <li v-for="(v,index) in goodsList" :key="index">
               <span>{{v.productName}}</span>
               <span>{{v.salePrice}}</span>
               <span>{{v.productNum}}</span>
               <span>{{v.productNum*v.salePrice}}</span>
           </li>
       </ul>
       <p>
           <ul>
               <li>{{addressInfo.userName}}</li>
               <li>{{addressInfo.streetName}}</li>

               <li>{{addressInfo.tel}}</li>
           </ul>
       </p>
   </div>
</template>

<script>
    import moment from 'moment';
    import CheckStep from '@/components/CheckStep'
    export default {
       components: {CheckStep,},
       data() {
           return {
                orderId:"",
                orderTotal:"",
                createDate:"",
                addressInfo:{},
                goodsList:[]
           };
       },
       computed: {},
       watch: {},
       methods: {
           init(){
               axios.get('/users/orderDetail', {
                params: {
                    orderId: this.$route.query.orderId
                }
            })
            .then(response => {
                let {errno,msg,data} = response.data;
                let {orderId,orderTotal,createDate,addressInfo,goodsList} = data;
                this.orderId =orderId;
                this.orderTotal = orderTotal;
                this.createDate = createDate;
                this.addressInfo = addressInfo;
                this.goodsList = goodsList;
            })
            .catch(error => {
                console.log(error);
            });
           },
           format (time) {
                return moment(time).format('YYYY-MM-DD hh:mm:ss')
           }
       },
       created() {
           this.init();
       },
       mounted() {

       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
    .ordersucess{
        width:80%;
        margin: 20px auto;
        &>div{
            padding: 12px 0;
            border-bottom: 1px solid blue;
            span{
                padding-left:15px;
            }
        }
        .goodlist{
            width:650px;
            margin-top:10px;
            li{display: flex;span{flex:1;line-height: 40px;}}
        }
        p{
            width:200px;
            margin-left:auto;
            ul{
                text-align: right;
                li{line-height: 25px;}
            }
        }
    }
</style>